<template>
  <div class="app-container">
    <!-- 新增按钮 -->
    <el-button type="success" icon="el-icon-plus" @click="openAddWindow()">新增</el-button>

    <!-- 数据表格 -->
    <el-table style="margin-top: 10px" :data="tableData" row-key="menuId" default-expand-all
      :tree-props="{ children: 'children' }" stripe>
      <el-table-column prop="label" label="菜单名称"></el-table-column>
      <el-table-column prop="orderNum" label="排序" width="55px"></el-table-column>
      <el-table-column prop="type" label="菜单类型" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.type == '0'" size="normal">目录</el-tag>
          <el-tag type="success" v-else-if="scope.row.type == '1'" size="normal">
            菜单</el-tag>
          <el-tag type="warning" v-else-if="scope.row.type == '2'" size="normal">
            按钮</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="icon" label="图标" align="center">
        <template slot-scope="scope">
          <i :class="scope.row.icon" v-if="scope.row.icon.includes('el-icon')">
          </i>
          <svg-icon v-else :icon-class="scope.row.icon"></svg-icon>
        </template>
      </el-table-column>
      <el-table-column prop="code" label="权限标识"></el-table-column>
      <!-- <el-table-column prop="name" label="路由名称"></el-table-column> -->
      <el-table-column prop="path" label="路由地址"></el-table-column>
      <el-table-column prop="url" label="组件路径"></el-table-column>
      <el-table-column align="center">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="small" @click="handleEdit(scope.row)">编辑
          </el-button>
          <el-button type="danger" size="small" icon="el-icon-delete" @click="handleDelete(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增或编辑弹框 -->
    <system-dialog :title="menuDialog.title" :width="menuDialog.width" :height="menuDialog.height"
      :visible="menuDialog.visible" @onClose="onClose" @onConfirm="onConfirm">
      <div slot="content">
        <el-form :model="menu" ref="menuForm" :rules="rules" label-width="80px" :inline="true" size="small">
          <el-row>
            <el-form-item prop="parentName" size="small" label="所属菜单">
              <el-input v-model="menu.parentName" @click.native="selectParentMenu" :readonly="true"
                placeholder="请输入所属菜单" />
            </el-form-item>
            <el-form-item prop="label" size="small" label="菜单名称">
              <el-input v-model="menu.label" placeholder="请输入菜单名称" />
            </el-form-item>
            <el-col :span="24">
              <el-form-item prop="type" label="菜单类型">
                <el-radio-group v-model="menu.type">
                  <el-radio :label="0">目录</el-radio>
                  <el-radio :label="1">菜单</el-radio>
                  <el-radio :label="2">按钮</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item size="small" label="菜单图标">
                <my-icon @selecticon="setIcon" ref="child"></my-icon>
              </el-form-item>
            </el-col>
            <el-form-item prop="name" v-if="menu.type == 1" size="small" label="路由名称">
              <el-input v-model="menu.name" placeholder="请输入路由名称" />
            </el-form-item>
            <el-form-item prop="path" v-if="menu.type != 2" size="small" label="路由地址">
              <el-input v-model="menu.path" placeholder="请输入路由地址" />
            </el-form-item>
            <el-form-item prop="url" v-if="menu.type == 1" size="small" label="授权路径">
              <el-input v-model="menu.url" placeholder="请输入授权路径" />
            </el-form-item>
            <el-form-item prop="code" size="small" label="权限字段">
              <el-input v-model="menu.code" placeholder="请输入权限字段" />
            </el-form-item>
            <el-form-item size="small" label="菜单序号">
              <el-input-number v-model="menu.orderNum" controls-position="right" :min="0" />
            </el-form-item>
          </el-row>
        </el-form>
      </div>
    </system-dialog>

    <!-- 选择所属菜单弹框 -->
    <system-dialog :title="parentDialog.title" :width="parentDialog.width" :height="parentDialog.height"
      :visible="parentDialog.visible" @onClose="onParentClose" @onConfirm="onParentConfirm">
      <div slot="content">
        <el-tree style="font-size: 14px" ref="parentTree" :data="parentMenuList" node-key="menuId" :props="defaultProps"
          empty-text="暂无数据" :show-checkbox="false" default-expand-all :highlight-current="true"
          :expand-on-click-node="false" @node-click="handleNodeClick">
          <div class="customer-tree-node" slot-scope="{ node, data }">
            <!-- 长度为0说明没有下级 -->
            <span v-if="data.children.length == 0">
              <i class="el-icon-document" style="color: #8c8c8c; font-size: 18px" />
            </span>
            <span v-else @click.stop="openBtn(data)">
              <svg-icon v-if="data.open" icon-class="add-s" />
              <svg-icon v-else icon-class="sub-s" />
            </span>
            <span style="margin-left: 3px">{{ node.label }}</span>
          </div>
        </el-tree>
      </div>
    </system-dialog>

  </div>
</template>

<script>
import menuApi from '@/api/system/menu'
//导入对话框组件
import SystemDialog from '@/components/system/SystemDialog.vue';
//导入自定义图标组件
import MyIcon from '@/components/system/MyIcon.vue'

export default {
  name: 'Menu',
  components: { SystemDialog, MyIcon },
  data() {
    return {
      //表格数据列表
      tableData: [],
      //新增或编辑弹框属性
      menuDialog: {
        title: '',
        width: 630,
        height: 305,
        visible: false,
      },
      //表单参数
      menu: {},
      //表单校验
      rules: {
        type: [{ required: true, trigger: "change", message: "请选择菜单类型" }],
        parentName: [{
          required: true, trigger: "change", message: "请选择所属菜单"
        }],
        label: [{ required: true, trigger: "blur", message: "请输入菜单名称" }],
        name: [{ required: true, trigger: "blur", message: "请输入路由名称" }],
        path: [{ required: true, trigger: "blur", message: "请输入路由路径" }],
        url: [{ required: true, trigger: "blur", message: "请输入组件路径" }],
        code: [{ required: true, trigger: "blur", message: "请输入权限字段" }],
      },

      //上级菜单弹框属性
      parentDialog: {
        title: '选择所属菜单',
        width: 280,
        height: 450,
        visible: false
      },
      //树属性定义
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      //所属菜单列表
      parentMenuList: [],
    }
  },
  created() {
    this.search()
  },
  methods: {
    async search() {
      //发送查询请求
      let res = await menuApi.getMenuList();
      //判断是否成功
      if (res.success) {
        //赋值
        this.tableData = res.data;
      }
    },
    //打开添加部门窗口
    openAddWindow() {
      //清空表单数据
      this.$resetForm("menuForm", this.menu);
      //设置窗口标题
      this.menuDialog.title = "新增菜单";
      //显示窗口
      this.menuDialog.visible = true;
      //清空菜单图标
      this.$nextTick(() => {
        this.$refs["child"].userChooseIcon = "";
      })
    },
    //弹窗关闭事件
    onClose() {
      this.menuDialog.visible = false;
    },
    //弹窗确认事件
    onConfirm() {
      this.$refs.menuForm.validate(async (valid) => {
        if (valid) {
          let res = null;
          if (this.menu.menuId == undefined) {
            //发送添加请求
            res = await menuApi.addMenu(this.menu);
          } else {
            //发送修改请求
            res = await menuApi.updateMenu(this.menu);
          }
          //判断是否成功
          if (res.success) {
            this.$message.success(res.message);
            //刷新
            this.search();
            //关闭窗口
            this.menuDialog.visible = false;
          } else {
            this.$message.error(res.message);
          }
        }
      });
    },
    //选择属性菜单
    async selectParentMenu() {
      //显示窗口
      this.parentDialog.visible = true;
      //发送查询请求
      let res = await menuApi.getParentTreeList();
      //判断是否成功
      if (res.success) {
        //赋值
        this.parentMenuList = res.data;
      }
    },
    //选择菜单属性取消事件
    onParentClose() {
      this.parentDialog.visible = false
    },
    //选择菜单属性确认事件
    onParentConfirm() {
      this.parentDialog.visible = false
    },
    //切换树形图标
    openBtn(data) {
      data.open = !data.open
      this.$refs.parentTree.store.nodesMap[data.menuId].expanded = !data.open
    },
    //所属菜单节点的点击事件
    handleNodeClick(data) {
      //所属父级菜单ID
      this.menu.parentId = data.menuId;
      //所属父级菜单名称
      this.menu.parentName = data.label;
    },
    //给icon绑定的点击事件
    setIcon(icon) {
      this.menu.icon = icon;
    },
    //修改按钮
    handleEdit(row) {
      this.menu = row;
      this.menuDialog.title = "编辑菜单";
      this.menuDialog.visible = true;
      this.$nextTick(() => {
        this.$refs["child"].userChooseIcon = row.icon;//菜单图标回显
      })
    },
    //删除按钮
    async handleDelete(row) {
      //判断是否存在子菜单
      let result = await menuApi.getCheckMenu({ menuId: row.menuId });
      //判断是否可以删除
      if (!result.success) {
        //提示不能删除
        this.$message.warning(result.message);
      } else {
        //确认是否删除
        let confirm = await this.$myconfirm("确定要删除该数据吗?");
        if (confirm) {
          //发送删除请求
          let res = await menuApi.deleteMenu({ menuId: row.menuId });
          //判断是否成功
          if (res.success) {
            //成功提示
            this.$message.success(res.message);
            //刷新
            this.search();
          } else {
            //失败提示
            this.$message.error(res.message);
          }
        }
      }
    }
  }
};
</script>
